<template>
  <div>
    <div class="h60">
      <span class="exe_title">{{ Num }}.{{ item.title }}</span>
      <span class="tags">
        <el-tag class="jj-bg" v-if="item.isJt == 1">机经</el-tag>
        <el-tag class="yc">预测</el-tag>
        <el-tag class="ttNum">{{ item.titleNumber }}</el-tag>
      </span>
    </div>

    <div class="content" v-if="item.content != ''">{{ item.content }}</div>
    <!-- <div class="content" >
      <Audioplayer v-if="item.url" :url="item.url"></Audioplayer>
    </div> -->
    <div class="title">{{ item.describe }}</div>

    <div
      :class="!isOpen ? 'setpink' : ''"
      class="microphone"
      @click="handleClick"
    >
      <i class="iconfont icon-maikefeng"></i>
    </div>
    <div class="operate_mic">
      <div v-if="isOpen > 0" class="countdown">点击开始录音</div>
      <div class="countdown" v-else>
        <span ref="zeroHidden">点击结束录音</span>
      </div>
    </div>
    <!-- 录音 -->
     <!-- 提示音 -->
          <audio ref="audio" :src="audioUrl"></audio>
    <div class="record">
      <el-form ref="recorderForm">
        <Aplayer v-if="Rurl" :url="Rurl"></Aplayer>
      </el-form>
    </div>
    <div class="time">
      <span class="readyTime" v-if="readyTime > 0"
        >请准备：00:{{ readyTime > 9 ? readyTime : "0" + readyTime }}</span
      >
      <span v-if="readyTime == 0">答题时间：{{ s_to_hs(answerTime) }}</span>

      
    </div>
  </div>
</template>

<script>
import writingUtil from "@/utils/writingUtil";
import Aplayer from '../../../../practice/exercise/aplayer'
export default {
  props: [ 'item', 'Num'],
  mixins: [writingUtil],
  components: {
    Aplayer
  },
  data () {
    return {
      readyTime: 35,//准备时间
      answerTime: 0,//答题时间
      recordingCountDown: 40, // 答题时间倒计时
      totalTime: 0, // 录音总时长
      percent: 0, // 播放进度比
      interval: {},//循环组件
      isOpen: false,//是否开始录音
      tips: false, // 麦克风是否授权
      Rurl:'',
       audioUrl: require('../../../../../assets/alert/dingd.mp3'), // 提示音
    }
  },
    watch: {
    readyTime: {
      handler () {
        var that = this
        if (this.readyTime == 0) {
          // console.log(1);
          this.$refs.audio.play();//点击触发 点击音效
          that.startRecorder()
          this.answerTimeCount()
        }
      }
    }
  },
  created() {
    // 进入页面即请求麦克风权限
    this.getPermission()
    this.coutDown()
  },
  methods: {
    handleClick(){
       // 获取了麦克风权限才允许点击麦克录音
      if (this.tips) {
        this.isOpen = !this.isOpen
        if (!this.isOpen) { // 开启录音

          this.$refs.audio.play();//点击触发 点击音效

          this.readyTime = 0
          clearInterval(this.interval.answerTime)
          if (this.answerTime !== 0) {
            this.answerTime = 0
            this.answerTimeCount()
            // this.startRecorder()
          }
          this.url = '' // 再次录音的时候，把播放器文件清空
        } else { // 关闭录音
          this.getRecorder()
          clearInterval(this.interval.answerTime)
        }
      } else {
        this.$msg.info('请先打开麦克风授权')
      }
    },
      // 准备答题倒计时
    coutDown () {
      //  this.$refs.audio.play();//点击触发 点击音效
      var that = this
      this.interval.mkf = setInterval(() => {
        if (this.readyTime > 0) {
          this.readyTime--
        } else {
          this.isOpen = false
        }
      }, 1000);
    },
      // 答题时间计时
    answerTimeCount () {
       this.$refs.audio.play();
      var that = this
      this.url = ''
      clearInterval(this.interval.answerTime)
      this.answerTime = 0
      this.interval.answerTime = setInterval(() => {
        // 答题时间上限
        if (this.answerTime < 40) {
          this.answerTime++
        } else {
          this.answerTime = 40
          this.isOpen = true
          this.getRecorder()
          clearInterval(this.interval.answerTime)
        }
      }, 1000);
    },
  },

}
</script>

<style lang="less" scoped>
.none_audio_tip{
  font-size: 1.25rem;
  color: #999;
  padding: 1.125rem;
}
.time {
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  position: relative;
  margin-top: 1.875rem;
  span {
    margin-right: 1.875rem;
  }
  .iconfont {
    font-size: 1.5rem;
    color: #ccc;
  }
  .end {
    position: absolute;
    right: -1.5rem;
    text-align: right;
  }
}
.record {
  margin-left: 15rem;
}
.operate_mic {
  text-align: center;
  font-size: 1.25rem;
}
.setpink {
  background-color: #ff5e4e !important;
}
.microphone {
  width: 4.375rem;
  height: 4.375rem;
  line-height: 4.375rem;
  text-align: center;
  margin-left: 47%;
  border-radius: 50%;
  cursor: pointer;
  background-color: #eee;
  .iconfont {
    font-size: 2.5rem;
    color: #fff;
  }
  .countdown {
    height: 2.8125rem;
    line-height: 2.8125rem;
    font-size: 1rem;
    color: #333;
    text-align: center;
  }
}
.h60 {
  height: 3.75rem;
  line-height: 3.75rem;
  background-color: #f7f7f7;
  margin-top: 1.875rem;
  margin-bottom: 1rem;
  display: flex;
  .label {
    height: 100%;
  }
  .tags {
    width: 36.625rem;
  }
  .exe_title {
    width: 90rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    font-size: 1rem;
    padding-left: 1.25rem;
  }
  .el-tag {
    height: 1.575rem;
    line-height: 1.575rem;
    margin-right: 0.9375rem;
    color: #fff;
    padding: 0 0.375rem;
    border: none;
  }

  .ttNum {
    background-color: #94d0f7;
  }
  .jj-bg {
    background: #ff9b4f;
  }
  .yc {
    background-color: #00cccc;
  }
}

.content {
  font-size: 1.125rem;
  color: #333;
  padding: 1.25rem;
  background-color: #fffafa;
  display: flex;
  flex-wrap: wrap;
  width: 870px;
  word-wrap: break-word;

  border: 1px dashed #ff5e4e;
}

.title {
  font-size: 1.5rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-top: 1rem;
  padding: 0 1.875rem;
}
</style>